<template>
  <div>
    <div class="title font14 ma30-15">
      <p>我的足迹</p>
    </div>
    <div class="bor7 pa15">
      <!-- 搜索 -->
      <div class="search clearfix">
        <div class="search-box">
          <form action>
            <input v-model="keyword" placeholder="输入您要查询的信息" />
            <el-button type="primary" class="primary" @click="defaultSearch()"
              >搜索</el-button
            >
          </form>
          <el-popover
            placement="top"
            width="160"
            v-model="visible1"
            v-if="info.total > 0"
          >
            <p>是否清空所有数据？</p>
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini" @click="deleteAll()"
                >确定</el-button
              >
              <el-button
                size="mini"
                type="text"
                class="quxiao"
                @click="visible1 = false"
                >取消</el-button
              >
            </div>
            <el-button slot="reference" class="primary">清空</el-button>
          </el-popover>
        </div>
      </div>
      <el-row :gutter="20" class="activity-doxs">
        <el-col :span="6" v-for="neirong in this.defaultList" :key="neirong.id">
          <div class="grid-content bg-purple">
            <div class="activity">
              <div>
                <router-link
                  target="_blank"
                  :to="{ path: '/hotshow', query: { id: neirong.a_id } }"
                  class="bl over"
                  ><img :src="$api + neirong.a_image" class="w100" alt=""
                /></router-link>
                <div class="content1">
                  <div class="data font12">
                    活动时间：{{ neirong.a_start_date }}
                  </div>
                  <router-link
                    target="_blank"
                    :to="{ path: '/hotshow', query: { id: neirong.id } }"
                    class="bl name line1 font14"
                    >{{ neirong.a_title }}
                  </router-link>
                  <div class="address text font12">
                    <i class="iconfont icon-shouhuodizhi"></i
                    >{{ neirong.a_address }}
                  </div>
                  <div class="people clearfix font12">
                    <div class="fl clearfix">
                      <div class="tx_img">
                        <img :src="$api + neirong.organizer.avatar" alt />
                      </div>
                      <div>{{ neirong.organizer.nickname }}</div>
                    </div>
                    <div class="fr">
                      <i class="iconfont icon-yanjing"></i>
                      {{ neirong.a_views }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- <el-empty description="您还未收藏过任何活动">
        <el-button type="primary">去看看</el-button>
      </el-empty> -->
      <!-- 分页 -->
      <div class="block ta">
        <el-pagination
          layout="  prev, pager, next "
          :page-size="page_size"
          @current-change="current_change"
          :current-page.sync="currentPage"
          :pager-count="5"
          :total="info.total"
          v-if="info.pages > 1"
        >
        </el-pagination>
        <el-empty description="暂无数据" v-if="info.total == 0"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "../../assets/data.js";
export default {
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      isActive: 1,
      visible1: false,
      defaultList: [],
      info: [], //数据
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      sort: "",
      keyword: "",
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
      visible7: false,
    };
  },
  mounted() {
    this.getAllList();
  },
  methods: {
    //清空
    deleteAll() {
      var that = this;
      this.$axios
        .get(this.$api + "/api/history/deleteall")
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            that.$message({
              message: res.data.msg,
              type: "success",
            });
            this.getAllList();
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getAllList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/history/index?page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size +
            "&sort=" +
            that.sort +
            "&order=desc&search=title:" +
            that.keyword
        )
        .then(function (response) {
          that.defaultList = response.data.data.data;
          that.info = response.data.data.page;
          ////console.log(that.defaultList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getAllList();
    },
    defaultSearch() {
      ////console.log(this.keyword);
      this.getAllList();
    },
  },
};
</script>

<style scoped>
.quxiao {
  padding: 7px 15px;
  font-size: 0.875rem;
  background: #f6f5f5;
}
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.search-box {
  float: right;
}
.search .search-box form {
  float: left;
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  width: 26.375rem;
  /* line-height: 2.5rem; */
}
.search .search-box form input {
  border: none;
  height: 100%;
  width: 70%;
  float: left;
  height: 2.5rem;
  border-radius: 4px;
  padding-left: 0.9375rem;
}
.search .search-box form input::-webkit-input-placeholder {
  color: rgba(84, 85, 86, 0.44);
}
.search .search-box form button {
  float: right;
}
.search .search-box .el-button {
  padding: 0.75rem 2rem;
}
.search .search-box > button {
  float: left;
  position: relative;
  top: 1px;
  margin-left: 0.9375rem;
}
.search {
  margin-bottom: 1.25rem;
}
.activity > div {
  border-radius: 0.625rem;
  border: solid 1px #dedede;
  overflow: hidden;
}
.activity .data {
  color: #848484;
}
.activity .content1 {
  padding: 1rem 0.8rem 1rem;
}
.activity .name {
  line-height: 1.5rem;
  font-weight: 600;
  color: #000000;
  margin: 0.5rem 0;
}

.activity .over {
  border-radius: 0.625rem 0.625rem 0px 0px;
}
.activity .people {
  line-height: 1.5rem;
  color: #848484;
  line-height: 3.125rem;
}
.activity .people .tx_img img {
  object-fit: cover;
  width: 3.125rem;
  height: 3.125rem;
  line-height: 3.125rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  display: block;
}
.activity .people .fl div {
  float: left;
}
.mb30 {
  margin-bottom: 1.875rem;
}
.mb45 {
  margin-bottom: 2.8125rem;
}
.activity > div:hover {
  border-color: #de5044;
}
.activity > div:hover .over img {
  transform: scale(1.1);
}
.activity > div:hover .name {
  color: #de5044;
}
.activity-doxs .el-tabs__content .el-tab-pane {
  background: #fff;
  padding: 1.25rem;
  border-radius: 0.4375rem;
}
.activity-doxs > div {
  margin-bottom: 1.25rem;
}
@media (max-width: 990px) {
  .activity-doxs > div {
    width: 50%;
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .search .search-box form {
    width: calc(100% - 70px - 2%);
    margin-right: 2%;
  }
   .search-box {
   width: 100%;
 }
 .search .search-box .el-button,.primary1 {
   width: 70px;
   padding-left: 0;
   padding-right: 0;
   text-align: center;
 } .activity-doxs > div {
    width: 100%;
  }
}
</style>
